<template>
  <li class="chaosong">
    <div class="tou">
      <img src="../../public/images/keep/green.png" class="dui" />
      <img src="../../public/images/keep/laba.png" />
    </div>
    <div class="you">
      <span
        ><h4>抄送人</h4>
        <h5 v-if="monitor.name && monitor.img">已抄送4人</h5>
        <h5 v-if="!monitor.name || !monitor.img">已抄送3人</h5>
        <h6>全部未读</h6>
      </span>
      <span @click="shows"></span>
    </div>
    <ul class="csren" id="csren" v-show="show">
      <li>
        <img src="../../public/images/keep/haijun.jpg" /><br />
        <span>程海军</span>
      </li>
      <li>
        <img src="../../public/images/yonggang.jpg" /><br />
        <span>王永刚</span>
      </li>
      <li>
        <img src="../../public/images/keep/shanwei.jpg" /><br />
        <span>刘善伟</span>
      </li>
      <li v-if="monitor.name && monitor.img">
        <img :src="monitor.img" /><br />
        <span>{{ monitor.name }}</span>
      </li>
    </ul>
  </li>
</template>

<script>
export default {
  name: "Copy",
  props: ["monitor"],
  data() {
    return {
      show: true,
    };
  },
  mounted() {
    console.log(this.monitor.name);
    console.log(this.monitor.img[0]);
  },
  methods: {
    shows() {
      this.show = !this.show;
    },
  },
};
</script>

<style scoped>
.chaosong .csren {
  margin: 0 15vw;
  margin-top: -2vh;
  margin-bottom: 5vh;
  display: block;
}

.chaosong .csren li {
  width: 20%;
  font-size: 1.2vh;
  text-align: center;
  color: #96979b;
}

.chaosong .csren img {
  width: 3vh;
  height: 3vh;
  border-radius: 3px;
  background-color: #3396fb;
}
.chaosong .you span:last-child {
  display: inline-block;
  width: 6vh;
  height: 5vh;
}
.chaosong .you span:last-child::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  width: 0.8vh;
  height: 0.8vh;
  border: 1px solid #848b92;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg) translate3d(-1vw, 1vh, 0);
}
</style>